<template>
  <BasicModal
    v-bind="$attrs"
    title="用户列表"
    wrapClassName="is-absolute"
    :maskStyle="{ position: 'absolute' }"
    @register="roleRegister"
    :width="845"
    :minHeight="420"
    :height="520"
    :showOkBtn="false"
    cancelText="关闭"
    :getContainer="getDelContainer"
  >
    <div class="role-user">
      <BasicTable @register="registerTable"></BasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import { BasicModal, useModalInner } from '@/components/Modal'
import { getRoleUserBasicColumns } from '../dataSource'
import { message } from 'ant-design-vue'
import { BasicTable, useTable } from '@/components/Table'
import api from '@/api'

const { userRoleList } = api

const [registerTable, { reload, setPagination, setTableData, setProps }] = useTable({
  api: userRoleList,
  columns: getRoleUserBasicColumns(),
  immediate: false, //初始化不请求数据
  pagination: { hideOnSinglePage: true }, // 只有一页时隐藏分页器
  showIndexColumn: true
})

const [roleRegister, { setModalProps, closeModal }] = useModalInner((data) => {
  setTableData([])
  setPagination({
    current: 1,
    pageSize: 10,
    total: 0
  })
  setProps({
    searchInfo: {
      roleId: data.roleId
    }
  })
  reload()
  // nextTick(() => {
  //   reload()
  // })
})

const getDelContainer = () => {
  return document.querySelector('.page-wrapper')
}
</script>
<style lang="less" scoped>
.role-user {
  padding: 8px 4px 0;
}
</style>
